<template>
  <div class="main-top-wrap">
    <div class="ad-banner" @click="mainBannerGo()">
      <img
        v-if="adMinTopData.bannerList.length > 0"
        :src="adMinTopData.bannerList[0].img"
        class="banner-image"
      />
      <!--super banner 固定位置-->
      <p
        v-if="!adMinTopData.diamondList.length"
        class="super-banner-fixed"
        @click.stop="superBannerGo()"
      >
        <img
          v-if="adMinTopData.superBannerList.length > 0"
          :src="adMinTopData.superBannerList[0].img"
          class="banner-image"
        />
      </p>
      <!--金刚位-->
      <ul
        class="diamond-wrap"
        v-if="adMinTopData.diamondList.length > 0"
        :style="{
          backgroundColor: diamondBgColor,
          backgroundImage: diamondBgImg
        }"
      >
        <li
          class="j_akc_ubt"
          v-for="(v, index) in adMinTopData.diamondList"
          :key="index"
          @click.stop="diamondLink(v, index)"
        >
          <img :src="v.img" alt="" srcset="" />
          <p class="more_text1">{{ v.name }}</p>
        </li>
      </ul>
    </div>
    <!--super banner-->
    <p
      v-if="adMinTopData.diamondList.length > 0"
      class="super-banner"
      @click.stop="superBannerGo()"
    >
      <img
        v-if="adMinTopData.superBannerList.length > 0"
        :src="adMinTopData.superBannerList[0].img"
        class="banner-image"
      />
    </p>
    <!-- 品牌聚合-->
    <div
      v-if="brandList.length > 0"
      class="brands"
      :style="{
        backgroundColor: bgColor,
        backgroundImage: bgImg
      }"
    >
      <p class="brands-title" v-if="adMinTopData.brandTitle">
        {{ adMinTopData.brandTitle }}
      </p>
      <ul class="ad-pros">
        <li
          v-for="(item, index) in brandList"
          :key="index"
          :class="(index + 1) % 3 === 0 ? 'row-last' : ''"
          :style="`background-image: url(${item.img})`"
          @click.stop="goBrand(item, index)"
        >
          <p class="pro-price">{{ item.showText }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    adMinTopData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    conferenceId: {
      type: String,
      default: () => {
        return '';
      }
    }
  },
  name: 'mainTop',
  data() {
    return {
      brandList: [],
      bgColor: this.adMinTopData.brandBgColor,
      bgImg: `url(${this.adMinTopData.brandBgImg})` || '',
      diamondBgColor: this.adMinTopData.diamondBgColor,
      diamondBgImg: `url(${this.adMinTopData.diamondBgImg})` || ''
    };
  },
  created() {
    const brands = this.adMinTopData.brandList.slice(0, 9);
    this.brandList = brands;
  },
  mounted() {},
  computed: {},
  methods: {
    mainBannerGo() {
      const mainBannerData = this.adMinTopData.bannerList[0];
      if (mainBannerData && mainBannerData.href) {
        if (mainBannerData.hrefType === 2) {
          // todo
        } else {
          window.location.href = mainBannerData.href;
        }
      }
    },
    superBannerGo() {
      const superBannerData = this.adMinTopData.superBannerList[0];
      if (superBannerData && superBannerData.href) {
        if (superBannerData.hrefType === 2) {
          // todo
        } else {
          window.location.href = superBannerData.href;
        }
      }
    },
    goBrand(v) {
      console.log(v);
    },
    diamondLink(v) {
      console.log(v);
    }
  }
};
</script>
<style lang="scss" scoped>
/* 超出一行 ...*/
.more_text1 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.main-top-wrap {
  width: 100%;
  .ad-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    .banner-image {
      display: block;
      width: 100%;
    }
    .diamond-wrap {
      position: absolute;
      bottom: 0px;
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-size: 100%;
      background-repeat: no-repeat;
      li {
        img {
          width: 45px;
          height: 45px;
          // border-radius: 50%;
        }
        p {
          font-size: 11px;
          width: 45px;
          font-family: PingFangSC sans-serif;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 16px;
          height: 16px;
          text-align: center;
          padding: 6px 0;
          // box-sizing: border-box;
        }
      }
    }
  }
  .super-banner {
    width: 93.6%;
    margin: 0 auto;
    img {
      display: block;
      width: 100%;
    }
  }
  .super-banner-fixed {
    position: absolute;
    bottom: 0px;
    width: 93.6%;
    left: 3.47%;
    img {
      display: block;
      width: 100%;
    }
  }
  .brands {
    width: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 12px;
    .brands-title {
      font-size: 18px;
      text-align: center;
      margin-top: 10px;
      line-height: 25px;
      background-image: -webkit-linear-gradient(
        right,
        #f4cda5,
        #ffead5,
        #edb378,
        #ffe1c2,
        #f5c18b
      );
      font-family: PingFangSC, sans-serif;
      font-weight: 600;
      -webkit-background-clip: text;
      color: transparent;
    }
    .ad-pros {
      width: 100%;
      padding: 0 11px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      justify-content: flex-start;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-size: 100%;
      li {
        width: 112px;
        height: 166px;
        background-size: 112px 166px;
        background-repeat: no-repeat;
        position: relative;
        margin-top: 8px;
        margin-right: 8px;
        &.row-last {
          margin-right: 0;
        }
        .pro-price {
          width: 100%;
          position: absolute;
          bottom: 5px;
          height: 18px;
          line-height: 18px;
          font-size: 13px;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }
}
</style>
